.send-email {
  width: 100%;
  min-height: 100%;
  padding: 24rpx;
  padding-bottom:120rpx;
  box-sizing: border-box;
  background-color: #F3F4F8;
  .text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .footer{
    position: fixed;
    left:0;
    bottom:0;
    background-color: #fff;
    width: 100%;
    padding:0 20rpx;
    height: 120rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top:1px solid #eee;
    box-sizing: border-box;
    .pay-btn{
      width: 100%;
      height: 84rpx;
      line-height: 84rpx;
      text-align: center;
      background: #1F71ED;
      border-radius: 42rpx;
      color: #FFFFFF;
      .price{
        font-size: 44rpx;
        font-weight: 500;
      }
    }
  }
  .card{
    .service-list{
      background-color: #fff;
      border-radius: 8rpx;
      padding:0 24rpx;
      .service-item{
        display: flex;
        align-items: center;
        height: 140rpx;
        // padding: 0 24rpx;
        &:not(:last-child){
          border-bottom:1px solid #eee;
        }
        .right{
          .arrow-icon{
            width: 15rpx;;
          }
        }
        .middle{
          flex:1;
          margin:0 36rpx;
          .s-desc{
            font-size: 24rpx;
            font-weight: 400;
            color: #999999;
          }
          .s-name{
            font-size: 28rpx;
            font-weight: 500;
            color: #333333;
          }
        }
        .left{
          .service-icon{
            width: 60rpx;
            height: 60rpx;
          }
        }
      }
    }
    .list{
      display: flex;
      padding:20rpx 20rpx 20rpx 0;
      .item{
        width: 260rpx;
        min-width: 260rpx;
        height: 300rpx;
        margin-right: 20rpx;
        background: linear-gradient(180deg, #CCDDFF 0%, #FFFBF9 34%, #FFFFFF 69%, #FFFFFF 100%);
        border-radius: 8rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        .open-look{
          font-size: 20rpx;
          font-weight: 400;
          color: #1F71ED;
          margin-top:16rpx;
        }
        .p-desc{
          font-size: 24rpx;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
        }
        .p-name{
          font-size: 32rpx;
          font-weight: 500;
          color: #000000;
          width: 100%;
          padding:0 14rpx;
          box-sizing: border-box;
        }
        .icon{
          width:100rpx;
          height:100rpx;
          margin-bottom:24rpx;
        }
      }
      
    }
    .card-header{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .view-all{
        font-size: 24rpx;
        font-weight: 400;
        color: #1F71ED;
      }
    }
  }
  .new-tip{
    display: flex;
    margin-bottom: 20rpx;
    .lingdang{
      width: 60rpx;
      margin-right:10rpx;
    }
    .tip{
      font-size: 24rpx;
      font-weight: 400;
      color: #999999;
      .red{
        color: #EA4F3D;
      }
    }
  }
  .tips {
    color: red;
    font-size: 24rpx;
    margin: 30rpx 0;
    text-align: center;
  }
  .advert {
    width: 100%;
    //height: 150rpx;
    position: relative;
    margin-bottom: 20rpx;
    .share-button {
      width: 100%;
      height: 100%;
      padding: 0;
      border-radius: 0;
      border: 0px;
      background-color: #fff;
      &::after {
        border: 0;
      }
    }
    .advert-bg {
      width: 100%;
      height: 100%;
      border-radius: 10rpx;
    }
    .close {
      position: absolute;
      top: 0rpx;
      right: 0rpx;
      width: 30rpx;
      height: 30rpx;
      padding: 20rpx;
    }
  }
  .title {
    font-size: 30rpx;
    font-weight: 500;
    color: 111;
  }
  .step {
    width: 100%;
    margin: 23rpx 0 23rpx;
    background-color: #fff;
    box-shadow: 0px 2px 10px 0px rgba(33, 114, 237, 0.15);
    border-radius: 8px;
  }
  .step-1 {
    &.item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 124rpx;
      padding: 0 32rpx;
      border-bottom: 4rpx solid #fafafa;
      .title-box {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 120rpx;
        .is-false-title {
          font-size: 30rpx;
          color: #111111;
        }
      }
      .write-box {
        display: flex;
        align-items: center;
        width: 500rpx;
        height: 60rpx;
        padding-left: 33rpx;
        border: 1px solid rgba(238, 238, 238, 1);
        border-radius: 30px;
        font-size: 26rpx;
        input {
          width: 100%;
          color: #2172ed;
        }
      }
      .is-false-width {
        width: 480rpx;
      }
    }
  }
  .step-2 {
    margin-bottom: 20rpx;
    .info-details {
      .title-container{
        padding: 20rpx 24rpx 0;
        .title{
          font-size: 32rpx;
          font-weight: 500;
          color: #333333;
        }
      }
      .info-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        // height: 80rpx;
        padding: 20rpx 24rpx;
        font-size: 30rpx;
        // border-bottom: 1rpx solid #eeeeee;
        .text:nth-last-child(2) {
          font-size: 26rpx;
        }
        .each-num {
          margin-left: 57rpx;
          color: #FD4F0A;
        }
      }
    }
    .info-money {
      height: 160rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      border-bottom: 1px solid #eeeeee;
      .content {
        height: 100rpx;
        font-size: 60rpx;
        .text:nth-last-child(2) {
          font-size: 50rpx;
        }
        .umi,
        .wx {
          position: relative;
          margin-left: 10rpx;
          top: 5rpx;
          width: 35rpx;
          height: 35rpx;
        }
      }
    }
    .pay-way {
      box-sizing: border-box;
      padding: 0;
      margin:0 24rpx;
      border-bottom:1px solid #eee;
      .pay-umi,
      .pay-wx {
        width: 100%;
        box-sizing: border-box;
        // height: 110rpx;
        padding: 20rpx 24rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #eeeeee;
        .item {
          display: flex;
          align-items: center;
          font-size: 30rpx;
          color: #333333;
          image {
            width: 30rpx;
            height: 30rpx;
            vertical-align: top;
            margin-right: 10rpx;
          }
        }
        .gou {
          width: 40rpx;
          height: 40rpx;
        }
      }
      .pay-wx {
        border: none;
      }
    }
  }
  .top {
    top: -150rpx;
  }
}

.send-email{
  &.old{
    .step-1 .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 124rpx;
      padding: 0 32rpx;
      border-bottom: 4rpx solid #fafafa;
    }
    .step-1 .item .title-box {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 120rpx;
    }
    .step-1 .item .title-box .is-false-title {
      font-size: 30rpx;
      color: #111111;
    }
    .step-1 .item .write-box {
      display: flex;
      align-items: center;
      width: 500rpx;
      height: 60rpx;
      padding-left: 33rpx;
      border: 1px solid #eeeeee;
      border-radius: 30px;
      font-size: 26rpx;
    }
    .step-1 .item .write-box input {
      width: 100%;
      color: #2172ed;
    }
    .step-1 .item .is-false-width {
      width: 480rpx;
    }
  }
}
